<template>
  <div class="blogsDetail">
    <h4>{{ blog.title }}</h4>
    <hr />
    <p>{{ blog.description }}</p>
    <router-link :to="{ name: 'blogEdit', params: { blogId: blog.id } }"
      >  <el-button type="primary" icon="el-icon-edit" size="mini" round>编辑</el-button>
    </router-link>

    <el-popover
  placement="top"
  width="160"
  v-model="visible">
  <p>确定删除此文章？</p>
  <div style="text-align: right; margin: 0">
    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
    <el-button type="primary" size="mini" @click="del(blog.id)">确定</el-button>
  </div>
 <el-button type="danger" slot="reference" icon="el-icon-delete" size="mini" round>删除</el-button>
</el-popover>

   
    
    <div class="markdown-body" v-html="blog.content"></div>
  </div>
</template>

<script>
import request from "@/api/request.js";
import "github-markdown-css/github-markdown.css";
export default {
  data() {
    return {
      visible: false,
      blog: {
        id: "",
        user_id: "",
        title: "",
        description: "",
        content: "",
        create: "",
        status: "",
      },
    };
  },
  methods: {
    del(blogId) {
      request.delete("/blog/delete/" + blogId).then((res) => {
        this.$router.push({ name: "blogs" });
      });
    },
    toEdit() {
      this.$router.push({ name: "blogEdit" });
    },
    async retrieveById() {
      const blogId = this.$route.params.blogId;
      const res = await request.get("/blog/retrieveById/" + blogId);
      this.blog = res.data.data;
      /**
       * 将markdown的文本转为正常文本
       * */
      //拿到markdown渲染资源对象
      var markDownIT = require("markdown-it");
      var md = new markDownIT(); //获取到markdown-it的对象
      var result = md.render(this.blog.content); //将markdown文本渲染成html文本
      this.blog.content = result; //将正常文本赋值给页面显示
    },
  },
  created() {
    this.retrieveById();
  },
};
</script>

<style>
.blogsDetail{
  padding-right: 20%;
  padding-left: 20%;
}
</style>
